<template>
  <div class="content-container">
    <single-site-tree @furn="sitetreeshow=!sitetreeshow" ref="tree" :parent-allow-click="false"/>
    <div class="ml-tree" :class="sitetreeshow?'mainPadding':'hide'">
      <el-card class="box-card searchCard" shadow="never">
        <div class="searchParameter">
          <el-form
            ref="queryForm"
            :model="queryParams"
            :inline="true"
            label-width="68px"
            size="small"
            @keyup.enter.native="handleQuery"
          >
            <el-form-item label="时间" prop="name">
              <el-date-picker
                v-model="timeData"
                :clearable="false"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="name">
              <el-radio-group v-model="queryParams.index" @change="radioChange">
                <el-radio :label="1">分钟</el-radio>
                <el-radio :label="2">小时</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div class="searchBtn">
          <div class="styleBtn">
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetTime">重置</el-button>
            <el-button type="primary" v-if="!showStatus" @click="showEcharts">曲线</el-button>
            <el-button type="success">导出</el-button>
          </div>
        </div>
      </el-card>
      <table-hour :tableList="dataList" :loading="loading" @ok="tableHour" v-if="!showStatus"/>
      <table-minute :tableList="dataList" :loading="loading" @ok="tableMinute" v-if="showStatus"/>
    </div>
    <history-model ref="historyModel"/>
  </div>
</template>

<script>
import { Mixin } from '@/utils/mixin/Mixin'
import SingleSiteTree from '@/components/zhhbTree/SingleSiteTree'
import TableHour from '@/views/onlineMonitor/history/components/TableHour'
import TableMinute from '@/views/onlineMonitor/history/components/TableMinute'
import HistoryModel from '@/views/onlineMonitor/history/model/HistoryModel'

export default {
  name: 'Index',
  mixins: [Mixin],
  components: {
    TableHour,
    TableMinute,
    SingleSiteTree,
    HistoryModel
  },
  data() {
    return {
      timeData: [],
      index: 1,
      showStatus: true,
      sitetreeshow: true,
      disableMixinCreated: true,
      dataList: [],
      url: {
        list: '/hisdata/getHisdata'
      },
      substationId: ''
    }
  },
  watch: {
    timeData: {
      handler(val) {
        this.queryParams.str = val[0]
        this.queryParams.end = val[1]
      },
      deep: true
    },
    dataSource: {
      handler(val) {
        this.dataList = val || []
      },
      deep: true
    }
  },
  created() {
    this.getCurrentHour()
    this.$set(this.queryParams, 'index', 1)
  },
  methods: {
    getList() {
      this.queryParams.substationId = this.treeCurrentNode.data.id
      this.handleQuery()
    },
    tableHour(e) {
      this.queryParams.page = e.page
      this.queryParams.limit = e.limit
      this.handleQuery()
    },
    tableMinute(e) {
      this.queryParams.page = e.page
      this.queryParams.limit = e.limit
      this.handleQuery()
    },
    getCurrentHour() {
      const str = this.$time.currentHour + ':00'
      const end = this.$time.currentHour + ':59'
      this.timeData = [str, end]
      this.queryParams.str = str
      this.queryParams.end = end
      this.handleQuery()
    },
    resetTime() {
      this.getCurrentHour()
    },
    radioChange(e) {
      if (e == 1) {
        this.showStatus = true
        this.handleQuery()
      } else {
        this.showStatus = false
        this.handleQuery()
      }
    },
    showEcharts() {
      this.$refs.historyModel.showModel()
    }
  }
}
</script>

<style lang="scss" scoped>
.content-container {
  .box-card {
    width: 100%;
    min-height: 85px;
    border-radius: 10px;
    background-color: #FFFFFF;
  }
}

</style>
